<template>
    <div class="bg">
        <!-- <div class="titleclass">可选择的课本</div> -->
        <van-radio-group v-model="radio">
            
            <ul>
                    <div class="titledivclass">
                        <li class="titleclass">可选择的课本</li>
                    </div>
                    <li v-for="(item) in booklist" :key="item.ID">
                        <van-radio :name="item.ID" @change.native="saveChanges" >{{item.BookName}}</van-radio>
                    </li>
            </ul>
        </van-radio-group>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            radio:'',
            booklist:[]
        }
    },
    mounted:function(){
        this.getitem();
        this.getolditem()
    },
    methods:{
        getitem:function(){
            this.$http.post(this.$config.GetAllBooks).then(res=>{
                this.booklist=res.data
            }).catch(err=>{
                this.$toast.fail("请求出错")
            })
        },
        saveChanges:function(ID){
            var uid=this.$store.state.uid;
            var bookid=this.radio;
            if (uid!="" && uid!=undefined && bookid!="" && bookid!=undefined) {
                this.$http.post(this.$config.SaveChanges,{
                uid,bookid
            }).then(res=>{
                if (res.data.Success==true) {
                    this.$toast.success("保存成功！")
                }else
                {
                    this.$toast.fail("保存失败，请稍后再试！")
                }
            })
            } else {
                this.$toast.fail("登陆失效！")
                this.$router.push("/login")
            }
        },
        getolditem:function(){
            var uid=this.$store.state.uid;

            this.$http.post(this.$config.GetOldChoose,{
                uid
            }).then(res=>{
                if (res.data.Success==true) {
                    this.radio=res.data.Mydata
                }
            }).catch(err=>{
                this.$toast.fail("加载失败，请稍后再试！")
            })
        }
    }
}
</script>

<style scoped>
.bg{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    margin: 2vh 4vw;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 5px 20px;
    margin-top: 10vh;

    
    
}
.liclass{
    
}
.radioclass{
    /* float: right; */
    background-color: unset;
}
li{
    margin: 20px;
    /* border: 1px solid red; */
}
.van-radio{
    overflow:inherit;
}
.titleclass{
    font-size: 18px;
    margin-bottom: 5px;
}
.titledivclass{
    padding-bottom: 3px;
    border-bottom: 1px solid rgb(216, 216, 216);

}
</style>
